<template>
  <h2>{{ person2.name }}</h2>
  <button @click="person2.name = 'xxx'">修改 name</button>
</template>
<script>
import { markRaw, reactive, shallowReadonly, toRaw } from 'vue'
export default {
  setup() {
    let person = {
      name: 'ifer',
      age: 18,
    }
    // !标记 person 永远不会变成响应式
    // markRaw(person)
    // 和上面等价
    person = markRaw(person)
    const person2 = reactive(person)
    return {
      person2,
    }
  },
}
</script>
